<template>
    <view :style="{'--color': color}">
        <status-bar :title="cash_method == 4 ? '微信收款码' : '支付宝收款码'"></status-bar>
        <view class="padding20-40">
            <u-input v-model="pageData.bankCard" border="bottom" v-if="cash_method == 4">
                <u-text text="微信号：" slot="prefix" type="tips"></u-text>
            </u-input>
            <u-input v-model="pageData.bankCard" border="bottom" v-if="cash_method == 5">
                <u-text text="支付宝号：" slot="prefix" type="tips"></u-text>
            </u-input>
            <u-input v-model="pageData.userName" border="bottom">
                <u-text text="真实姓名：" slot="prefix" type="tips"></u-text>
            </u-input>
            <u-input v-model="pageData.phone" type="number" border="bottom">
                <u-text text="联系电话：" slot="prefix" type="tips"></u-text>
            </u-input>
            <!-- 或使用uni.chooseImage -->
            <u-upload :fileList="fileList" :maxCount="1" uploadText="请上传收款码图片" width="232" height="320"
                @afterRead="afterRead" @delete="deletePic"></u-upload>
            <view class="btn thmeBg flexac size32 white" @click="handleAdd">保存</view>
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            cash_method: '4', // 微信4、支付宝5
            pageData: '',
            fileList: []
        }
    },
    computed: {
        ...mapState(['color','bid'])
    },
    onLoad(e){
        if(e.cash_method) this.cash_method = e.cash_method
        this.initData()
    },
    methods: {
        initData(){
            this.$http.post({
                url: '/singleSaleApi/findBankCard'
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                if(this.cash_method == 4) this.pageData = res.data.toWx
                if(this.cash_method == 5) this.pageData = res.data.toZfb
                if(this.pageData.account_img) this.fileList = [{url: this.pageData.account_img}] // 回显
            })
        },
        async afterRead(e){ // 单选时file为对象,多选为数组
            let lists = [].concat(e.file)
            let fileListLen = this.fileList.length
            lists.map(item=>{ // 临时显示
                this.fileList.push({...item, status: 'uploading', message: '上传中'})
            })
            for(let i = 0; i < lists.length; i++){
                const res = await this.$common.uploadFile('/zzjApp/uploade?bid=' + this.bid, lists[i].url) // 调接口
                if(res.errcode != 100) return this.$Toast('上传失败')
                let item = this.fileList[fileListLen]
                let url = this.$imgUrls(res.url.substring(23)) // 截取掉'/data/sswl/public_html/'
                this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success', message: '', url}))
                fileListLen++
            }
        },
        deletePic(e){
            this.fileList.splice(e.index, 1)
        },
        handleAdd(){
            if(!this.pageData.bankCard) return this.$Toast('账号不能为空')
            if(!this.pageData.userName) return this.$Toast('姓名不能为空')
            if(!this.pageData.phone) return this.$Toast('电话不能为空')
            if(!uni.$u.test.mobile(this.pageData.phone)) return this.$Toast('联系电话不正确')
            if(!this.fileList.length) return this.$Toast('请上传收款码图片')
            
            let { bankCard, userName, phone } = this.pageData
            this.$http.post({
                url: '/osmxcxApi/addCollectionMethod',
                data: {
                    cash_method: this.cash_method,
                    bankCard,
                    userName,
                    phone,
                    account_img: this.fileList[0].url
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.$Toast('保存成功')
                setTimeout(()=>{
                    uni.navigateBack() // delta默认1
                },1000)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/ .u-input {
    margin-bottom: 20rpx;
}
/deep/ .u-upload__wrap {
    margin-top: 20rpx;
    justify-content: center;
}
.btn {
    width: 300rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin: 60rpx auto;
}
</style>